import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button ,Modal,Row,Col,message,Select,Popconfirm,Divider,Pagination,DatePicker} from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import styles from './index.less';
const Option = Select.Option;
import {TimeSpan} from '../../utils';
const dateFormat = 'YYYY/MM/DD';
import moment from 'moment';
const Pages = ({ mater, dispatch, loading }) => {
    const columns = [
        {
            title: '物资名称',
            dataIndex: 'm_name',
        },
        {
            title: '编号',
            dataIndex: 'material_num',
        },
        {
            title: '类型',
            dataIndex: 'type',
            render:text => text && text == '1'?'检查/实验':text == '2'?"补充":"使用",
        },
        {
            title: '记录日期',
            dataIndex: 'check_time',
        },
        {
            title: '物资负责人',
            dataIndex: 'user_name',
        },
        {
            title: '物资仓库地点',
            dataIndex: 'd_name',
        },
        {
            title: '备注',
            dataIndex: 'remark',
        },
        // {
        //     title: '操作',
        //     dataIndex: 'option',
        //     render: (text,record) =><div>
        //         <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={()=>{}
        //             // ()=> dispatch({type:"mater/deletePointplan",payload:{id:record.id}})
        //         } okText="是" cancelText="否">
        //             <a style={{color:"red"}}>删除</a>
        //         </Popconfirm>
        //         <Divider type="vertical" />
        //         <a onClick={()=>{
        //             // dispatch({type:"mater/inputOut",payload:{view:true,record:record}});
        //             // dispatch({type:"mater/newpost"});
        //         }}>修改</a>
        //     </div>,
        // },
    ];
    return(
        <div className={styles.container}>
            <h3 style={{borderBottom:'2px solid #f5f5f5',padding:10}}>活动实时交易情况</h3>
            <div className={styles.title}>
                <div className={styles.num}>
                    <p style={{color:"#aaaaaa"}}>设备检查/实验总次数</p>
                    <span style={{color:'#000',fontSize:20}}>{mater.getMaterialup.checknum}</span>次
                </div>
                <div className={styles.num}>
                    <p style={{color:"#aaaaaa"}}>物资补充批次</p>
                    <span style={{color:'#000',fontSize:20}}>{mater.getMaterialup.addnum}</span>次
                </div>
                <div className={styles.num}>
                    <p style={{color:"#aaaaaa"}}>物资使用批数</p>
                    <span style={{color:'#000',fontSize:20}}>{mater.getMaterialup.deletenum}</span>次
                </div>
            </div>
            <PagesGET dispatch={dispatch} {...mater} loading={loading.global}/>
            <Table
                columns={columns}
                rowKey={id=>id.id}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={mater.getMaterialdown || null} />
            <Pagination current={mater.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={mater.total}
                onChange={pages => { !loading.global && dispatch({type:'mater/save',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            addressid:'',
            type:'',
            time:['',''],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"mater/getMaterial",payload:{
            addressid:'',
            type:'',
            starttime:'',
            endtime:'',
            pageNumber :1,
            pageSize :10,
        }});
        this.props.dispatch({type:"mater/getStorage",payload:{
            d_name: "",
            pageNumber :0,
            pageSize :0,
        }});
    }

    render (){

        let { pages,record,view ,dispatch ,loading,title,getStorageData} = this.props;
        let {time} = this.state;
        return (
            <div className={styles.containerit}>
                <Select placeholder="存储地点" style={{ width: 200,margin:10 }} value={this.state.addressid || undefined} onChange={(value)=>{
                    this.setState({addressid :value});
                }}>
                    <Option value="">全部</Option>
                    {
                        getStorageData && getStorageData.map(item=>{
                            return <Option key={item.id} value={item.id}>{item.name}</Option>;
                        })
                    }
                </Select>
                <Select placeholder="使用类型" style={{ width: 200,margin:10 }} value={this.state.type || undefined} onChange={(value)=>{
                    this.setState({type :value});
                }}>
                    <Option value="1">检查/实验</Option>
                    <Option value="2">补充</Option>
                    <Option value="3">使用</Option>
                </Select>
                {
                    this.state.iszhankai && <RangePicker value={time[0]?[moment(time[0], dateFormat), moment(time[1], dateFormat)]:[]} style={{margin:10 }}
                        onChange={(date, dateString)=>{
                            this.setState({
                                time:dateString,
                            });
                        }} />
                }
                <div style={{float:"right"}}>
                    <Button style={{marginLeft:10,zIndex:9999}} type='primary' onClick={()=>{
                        let {addressid,type,time} = this.state;
                        this.props.dispatch({type:"mater/getMaterial",payload:{
                            addressid:addressid,
                            type:type,
                            starttime:time[0],
                            endtime:time[1],
                            pageNumber :pages,
                            pageSize :10,
                        }});
                    }}>查询</Button>
                    <Button style={{margin:10,zIndex:9999}} onClick={()=>{
                        this.setState({
                            time:[],
                            type:'',
                            addressid:'',
                        });
                    }}>重置</Button>
                    <Button icon={this.state.iszhankai?'up':'down'}
                        style={{margin:10,border:'none',color:"#1890ff",zIndex:9999}} onClick={()=>{
                            this.setState({
                                iszhankai:!this.state.iszhankai,
                            });
                        }}>{this.state.iszhankai?'折叠':'展开'}</Button>
                </div>

            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            // let {title,author,cover,type,content} = nextProps.record;
            // this.setState({
            //     titleADD: title,
            //     author:author,
            //     cover:cover,
            //     type:type,
            //     content:content,
            // });
        }
        if(nextProps.pages !== this.props.pages){
            if(nextProps.pages == 1 && this.props.pages == 0){return;}
            // let {title} = this.state;
            // this.props.dispatch({type:"law/getStudy",payload:{
            //     s_id:this.props.catalog_id,
            //     title:title,
            //     pageNumber :nextProps.pages == 0?1:nextProps.pages,
            //     pageSize :10,
            // }});
        }
    }
}
export default connect(({ mater, loading }) => ({ mater, loading }))(Pages);
